@for $i from 1 to 1000 {
	.m-#{$i}{
		margin: $i + rpx;
	}
	.mlr-#{$i}{
		margin-left: $i + rpx!important;
		margin-right: $i + rpx!important;
	}
	.mtb-#{$i}{
		margin-top: $i + rpx!important;
		margin-bottom: $i + rpx!important;
	}
	.mt-#{$i}{
		margin-top: $i + rpx!important;
	}
	.mr-#{$i}{
		margin-right: $i + rpx!important;
	}
	.mb-#{$i}{
		margin-bottom: $i + rpx!important;
	}
	.ml-#{$i}{
		margin-left: $i + rpx!important;
	}
	
	.p-#{$i}{
		padding: $i + rpx;
	}
	.plr-#{$i}{
		padding-left: $i + rpx!important;
		padding-right: $i + rpx!important;
	}
	.ptb-#{$i}{
		padding-top: $i + rpx!important;
		padding-bottom: $i + rpx!important;
	}
	.pt-#{$i}{
		padding-top: $i + rpx!important;
	}
	.pr-#{$i}{
		padding-right: $i + rpx!important;
	}
	.pb-#{$i}{
		padding-bottom: $i + rpx!important;
	}
	.pl-#{$i}{
		padding-left: $i + rpx!important;
	}
	
	
	.font-#{$i}{
		font-size: $i + rpx;
	}
	.w-#{$i}{
		width: $i + rpx;
	}
	.h-#{$i}{
		height: $i + rpx;
	}
	.radius-#{$i}{
		border-radius: $i + rpx;
	}
	
	.top-#{$i}{
		top: $i + rpx;
	}
	.right-#{$i}{
		right: $i + rpx;
	}
	.bottom-#{$i}{
		bottom: $i + rpx;
	}
	.left-#{$i}{
		left: $i + rpx;
	}
	
	.z-index-#{$i}{
		z-index: $i;
	}
	
}

page{
	font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", 微软雅黑, Arial, sans-serif;
}

// 加粗
.font-bold{
	font-weight: bold;
}
.font-left{
	text-align: left;
}
.font-right{
	text-align: right;
}

.color-1{
	color: #111;
}
.color-2{
	color: #222;
}
.color-3{
	color: #333;
}
.color-4{
	color: #444;
}
.color-5{
	color: #555;
}
.color-6{
	color: #666;
}
.color-7{
	color: #777;
}
.color-8{
	color: #888;
}
.color-9{
	color: #999;
}
.color-a{
	color: #aaa;
}
.color-b{
	color: #bbb;
}
.color-c{
	color: #ccc;
}
.color-d{
	color: #ddd;
}
.color-e{
	color: #eee;
}
.color-f{
	color: #fff;
}
.color-red{
	color: #ed4014;
}
.color-blue{
	color: #6f9ef6;
}


// flex
.flex{
	display: flex;
	align-items: center;
}
.flex-column{
	display: flex;
	flex-direction: column;
}
.flex-centent{
	display: flex;
	justify-content: center;
	align-items: center;
}
.flex-between{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.flex-1{
	flex: 1;
}
.flex-2{
	flex: 2;
}
.flex-3{
	flex: 3;
}
.flex-4{
	flex: 4;
}
.flex-5{
	flex: 5;
}


// 定位
.relative{
	position: relative;
}
.absolute{
	position: absolute;
}
.fixed{
	position: fixed;
}


$blue:#6f9ef6;
$red:#fa8e8c;
$green:#98de6e;
$white:#ffffff;
$gray:#F2F3F5;

// 背景颜色
.bg-blue{
	background: $blue;
}
.bg-red{
	background: $red;
}
.bg-green{
	background: $green;
}
.bg-white{
	background: $white;
}
.bg-gray{
	background: $gray;
}

// 字体颜色
.color-green{
	color: $green;
}


// 透明度
.opacity-1{
	opacity: 0.1;
}
.opacity-2{
	opacity: 0.2;
}
.opacity-3{
	opacity: 0.3;
}
.opacity-4{
	opacity: 0.4;
}
.opacity-5{
	opacity: 0.5;
}
.opacity-6{
	opacity: 0.6;
}
.opacity-7{
	opacity: 0.7;
}
.opacity-8{
	opacity: 0.8;
}
.opacity-9{
	opacity: 0.9;
}


.border{
	border: 1px solid #e8eaec;
}